<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html><!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../../css/allBase.css">
    <![endif]-->
    <title>结果</title>

</head>
<body>
<div class="classified-search">
    <div class="date-range">
        日期范围：
        <!--<input type="text"  onfocus="WdatePicker({maxDate:'#F{\'%y-%M-%d\'}'})" id="logmin" class="input-text Wdate" style="width:120px;">-->
        <input type="text"  onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}'})" id="logmin" class="input-text Wdate" style="width:120px;height:20px">---
        <input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d'})" id="logmax" class="input-text Wdate" style="width:120px;height:20px">
        (*若选择的两个时间一致只显示一天的数据，若选择的两个时间不一致会显示这个时间段的数据趋势变化)
    </div>
    <div class="product-classification">
        <div class="productR">
            产品分类：
        </div>
        <div class="productL">
            <span id="allsingleproducts">全部单品</span>
            <span id="pcagent">pc客户端</span>
            <span id="agent">代理商版</span>
            <span id="ksbao">考试宝典</span>
            <span id="jsgjksbdp">技师高级职称</span>
	        <span id="jszjksbdp">技师中级职称</span>
	        <span id="jscjksbdp">技师(士)初级</span>
	        <span id="hlxgjzcksbdp">护理高级职称</span>
	        <span id="yxzjzcksbdp">医学中级职称</span>
	        <span id="cjhsksbdp">初级护师</span>
	        <span id="zghsksbdp">主管护师</span>
	        <span id="wkgjzcksbdp">外科高级职称</span>
	        <span id="wkzzysksbdp">外科主治医师</span>
	        <span id="nkgjzcksbdp">内科高级职称</span>
	        <span id="nkzzysksbdp">内科主治医师</span>
	        <span id="yxksbdp">医学考试宝典</span>
      <!--      <span id="jishigj">技师高级职称考试宝典</span>
            <span id="jishizj">技师中级职称考试宝典</span>
            <span id="jishi">技师（士）初级考试宝典</span>
            <span id="hlgjzc">护理高级职称考试宝典</span>
            <span id="yxzjzc">医学中级职称考试宝典</span>
            <span id="hushicj">初级护师考试宝典</span>
            <span id="hushizj">主管护师考试宝典</span>
            <span id="wkgjzc">外科高级职称考试宝典</span>
            <span id="wkzzys">外科主治医师考试宝典</span>
            <span id="nkgjzc">内科高级职称考试宝典</span>
            <span id="nkzzys">内科主治医师考试宝典</span>
            <span id="yxksbao">医学考试宝典</span>-->
            <span id="yxgjdbdbp">高级答辩</span>
            <span id="zyyszcp">执业药师</span>
            <span id="yxzcp">药学职称</span>
            <span id="yjksp">医技考试</span>
            <span id="zyysp">执业医师</span>
            <span id="zyyssp">住院医师</span>
            <span id="hlksp">护理考试</span>
            <span id="zzzyp">主治中医</span>
            <span id="zzysp">主治医师</span>
            <span id="yxgjp">医学高级</span>
            （*多选）
        </div>
    </div>
    <div class="purchase-situation">
        购买情况：
        <span class="selected" id="2">合计</span><span id="1">已购买</span><span id="0">未购买</span>（*单选）
    </div>
    <button id="btncx" onclick="" class="btn btn-success" type="submit">开始查询</button>
    <div class="refresh">
        <img src="../../img/refresh.png" alt="">
        <a class="tabReload" href="#">刷新当前</a>
    </div>
</div>
<!--数据展示结果-->
<div class="panel-body" style="display: none">
    <!--<canvas id="Canvas1" style="height: 500px; width: 80%;"></canvas>-->
    <div id="main" style="height:500px;"></div>
</div>
<script src="../../js/jquery/jQuery-2.2.0.min.js"></script>
<!--<script src="../js/charts/Chart.js"></script>-->
<script type="text/javascript" src="../../js/base/echarts.min.js"></script>
<script type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../../js/base/ajax.js"></script>
<script type="text/javascript" src="../../js/base/yingSoftPrg.js"></script>



<script type="text/javascript">
    var clients = [];
    var clientsName = [];

    this.init = function(){
        var option = {};
        var dd=new Date();
        var m=dd.getMonth()+1;
        var d1=dd.getDate();
        //var d2=dd.getDate();
        var days1=G_Prg.GetDay(dd.getFullYear(),m,d1);
        var days2=  dd.getFullYear()+'-'+m+'-'+d1;
        $('#logmin').val(days1);
        $('#logmax').val(days2);
        allclick();//点击事件

    }

    /**************************************************
     * 功能：点击事件
     * 函数名：allclick（）
     * 传入参数：无
     * 创建人：刘淳昊 2017-03-13
     *************************************************/
    function allclick() {

        var _url = '';
        //刷新页面
        $('.refresh').on('click',function(){
            window.location.reload();
        })
        //切换科目选项

        $('.productL span').on('click',function(){
            if($(this).hasClass('selected')){
                $(this).removeClass('selected');
            }else{
                clients =[];
                clientsName =[];
                $(this).addClass('selected');
                $('.productL .selected').each(function(){
                    clients.push($(this).attr('id'));
                    clientsName.push($(this).text());

                });
            }
        })
        //切换情况选项
        $('.purchase-situation span').on('click',function(){
            if($(this).hasClass('selected')){
                $(this).removeClass('selected');
            }else{
                $(this).addClass('selected').siblings().removeClass('selected');
            }
        })
        //查询结果
        $('#btncx').on('click',function(){
            $('.panel-body').show();
            getLoginData();
        })

    }

    /**************************************************
     * 功能：数据绘图
     * 函数名：Canvas1（）
     * 传入参数：无
     * 创建人：刘淳昊 2017-03-20
     *************************************************/
    function Canvas1(jsonData,times,_total,clientsName){
        console.log(jsonData[0].data)
        var series =[];
        var xAxis =[];
        var Itemsin = function(){
            return {
                name:'',
                itemStyle: {normal: {label : {show: true,fontSize:20,},color:"#3c8dbc",barBorderRadius: 5,}},
                label: {normal: {}},
                markLine: {data: [{type: 'average', name: '平均值'}]},
                data:[]
            }
        };
        var StyleSin = function(){
            return {
                data:[]
            }
        };
        var Item = function(){
            return {
                name:'',
                type:'line',
                itemStyle: {normal: {}},
                label: {normal: {}},
                markLine: {data: [{type: 'average', name: '平均值'}]},
                data:[]
            }
        };

        for(var i =0;i<jsonData.length;i++){
            //日期为x轴 柱状图
            if(times.length>1 && clients.length==1){
                var it = new Itemsin();
                var style = new StyleSin();
                it.name = '人数';
                it.type = 'bar';
                it.barWidth='50';
                it.data = jsonData[0].data;
                style.data = times;
                series.push(it);// 将item放在series中
                xAxis.push(style);

            }
            //日期为x轴 柱状图
            if(times.length == 1 && clients.length==1){
                var it = new Itemsin();
                var style = new StyleSin();
                it.name = clientsName[0];
                it.type = 'bar';
                it.barWidth='50';
                it.data = jsonData[0].data;
                style.data = times;
                series.push(it);// 将Itemsin放在series中
                xAxis.push(style);// 将StyleSin放在xAxis中
            }
            //科目为x轴 柱状图
            if(times.length == 1 && clients.length>1){
                var it = new Itemsin();
                var style = new StyleSin();
                it.name = clientsName[i];
                it.type = 'bar';
                it.barWidth='50';
                it.data = jsonData[i].data;
                style.data = clientsName;
                series.push(it);// 将Itemsin放在series中
                xAxis.push(style);// 将StyleSin放在xAxis中

            }
            //日期为x轴 折线图
            if(times.length > 1 && clients.length > 1){
                var it = new Item();
                var style = new StyleSin();
                it.name = clientsName[i];
                it.type = 'line';
                it.data = jsonData[i].data;
                style.data = times;
                series.push(it);// 将Itemsin放在series中
                xAxis.push(style);// 将StyleSin放在xAxis中

            }

        }
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '总登录人数：'+_total
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:[
                    {
                        name:'人数',
                        textStyle:{fontWeight:'bold', color:'#3c8dbc',fontSize:16}
                    }
                ]
            },
            yAxis: {

                type : 'value'

            },
            series: []
        };
        option.series = series;
        option.xAxis = xAxis;

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    /**************************************************
     *  统计用户点击数参数
     *  https://192.168.1.110:8003/api/new/clickCount
     *  @params startDay    开始时间
     *  @params endDay      结束时间
     *  @params clients     产品分类
     *  @params userType    购买情况
     *  @params location    按钮所在位置 （'章节练习'，’考点精讲‘）
     *  @params btnName     按钮名称（'章节练习'，’背/答‘）
     *  @params clickType   点击人数或点击次数【1.点击次数 2.点击人数】
     *  @params type        图表类型
     * 创建人：刘淳昊 2017-03-20
     *************************************************/
    function getLoginData(){
        var start=$('#logmin').val();
        var end=$('#logmax').val();
        var startTime = getDate(start);
        var endTime = getDate(end)
        var times=[];
        var _data =[];
        while((endTime.getTime()-startTime.getTime())>=0){
            var year = startTime.getFullYear();
            var month = startTime.getMonth().toString().length==1?"0"+startTime.getMonth().toString():startTime.getMonth();
            var day = startTime.getDate().toString().length==1?"0"+startTime.getDate():startTime.getDate();
            times.push(year+"-"+month+"-"+day);

            startTime.setDate(startTime.getDate()+1);
        }
        var userType = $('.purchase-situation .selected').attr('id');
        var clientsData = JSON.stringify(clients);
        var _url='/api/new/clickCount?startDay='+start+'&endDay='+end+'&userType='+userType+'&clients='+clientsData+'&location=章节练习&btnName=章节练习&clickType=2&type=2';
        G_AjaxApi.get(_url,false,function(json){
            var jsonData = JSON.parse(json);

            if(jsonData.status ==200){
                if(jsonData.data ==[ ]){
                    alert('数据为空');
                }else{
                    var _total = jsonData.data.allcount;
                    var _data = jsonData.data.list;
                    Canvas1(_data,times,_total,clientsName);
                }

            }else if(jsonData.status ==200){
                console.log(jsonData.status)
            }
        })
    }
    /**********************************************************
     * 功能：获取日期区间
     * ********************************************************/
    function getDate(datestr){
        var temp = datestr.split("-");
        var date = new Date(temp[0],temp[1],temp[2]);
        return date;
    }

    init();


</script>
</body>
</html>